<template>
    <div class="my-tabel">
     <!-- 搜索框+按钮 -->
         <div class="my-tabel">
             <el-row>
                 <el-col :span="20">
                      <el-input @keyup.native.13="filterUser" v-model="value" placeholder="查询的人名" suffix-icon="el-icon-search" >
</el-input>
                 </el-col>
                 <el-col :span="4">
                  <el-button @click="filterUser" type="primary">搜索</el-button>   
                 </el-col>
             </el-row>


         </div>

     <!-- 表格:嵌套表格 
     
    tableData.filter(data => 
    !value || data.name.toLowerCase().
    includes(value.toLowerCase()))
    -->
     <el-table :data="tableData.filter(data=>!value ||data.name.includes(value) )">
       <!-- 从一级打开二级 -->
       <el-table-column type="expand">
           <!-- 二级的表格 -->
         <template  slot-scope="props">
         <el-table :data="props.row.dateArr" style="width:100%">
          <el-table-column label="日期" prop="date">

          </el-table-column>
          <el-table-column label="分数" prop="grade">
              
          </el-table-column>
         </el-table>
         </template>

       </el-table-column>
       <!-- 下面是一级的表格 -->
       <el-table-column
          header-align="center"
          align="center"
          prop="date"
          label="日期" >
      </el-table-column>
     <el-table-column
      prop="name" label="姓名">
      </el-table-column>
      <el-table-column
          header-align="center"
          align="center"
          prop="grade"
          label="等级" >
      </el-table-column>
      <el-table-column
          header-align="center"
          align="center"
          prop="average"
          label="平均分" >
      </el-table-column>
      <el-table-column
          header-align="center"
          align="center"
          prop="totalScore"
          label="总分" >
      </el-table-column>
   
     </el-table>
    </div>
</template>
<script>
import datas from "./data"
export default {
    mounted(){
    // ajax请求
    setTimeout(()=>{
        this.tableData=datas
    },1500)
    },
    data(){
        return{
            value:"",
            // 表格的数据一开始空的
            tableData:[]
        }
    },
    methods:{
        // 过滤
        filterUser(){
            // 从数组里找出一条数据
       const data=this.tableData.filter((item)=>{
                if(item.name.search(this.value)!==-1){
                                   return item;
                }
 
            })
            console.log(this.value);
        }
    }
}
</script>